<template>
  <div style="display: flex; justify-content: center;">
    <div style="width: 755;">
      <div style="width: 755px; height: 392px">
        <div class="block text-center" m="t-4">
          <el-carousel trigger="click" height="392px">
            <el-carousel-item v-for="(item, index) in lunBoData" :key="index">
              <img :src="item.cover" alt="" style="height: 100%;" @click="linkLunBoDetail(item)">
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div>
  <div style="display: flex; justify-content: center;">
    <div style="width: 755; height: 550px; margin-top: 20px;">
      <!-- 右侧部分 -->
      <!-- 第一部分三个带图片的框 -->
      <div
        style="height: 30px; line-height: 30px; color: #fff; text-align: center; background-color: #1A68B7; width: 100%; margin-bottom: 10px; font-size: 1rem;">
        产品热销榜单</div>
      <div style="display:flex">
        <div class="container" v-for="(item, index) in topThree" :key="index" :class="{'container-middle': index === 1}">
          <img :src="item.url" alt="" style="width: 100%;">
          <div class="overlay" @click="() => router.push({ path: '/category', query: {'id': item.id } })">{{ item.title }}</div>
        </div>
      </div>
      <!-- 第二部分新品与技术资源 -->
      <div style="margin-top: 10px;">
        <div style="width: 495px; display: inline-block;">
          <div style="">
            <div style="height: 32px; line-height: 32px; padding-left: 20px;background-color: #64AADD; color: #fff;">
              <span style="font-size: 1rem;">新品推荐</span>
              <span style="padding-left: 150px; cursor: pointer;font-size: 1rem;" class="bty-more" @click="() => router.push({ path: '/product' })">更多 >></span>
            </div>
            <div style="height: 120px; line-height: 15px;">
              <div style="margin-top: 10px; color: #333; padding: 0 10px;font-size: 0.8rem;" v-for="(item, index) in product"
                :key="index">
                <span style="cursor: pointer;" @click="() => router.push({path: '/detail', query: {'id': item.id}})">{{ item.title }}</span>
                <span style="float: right;">{{ item.addtime }}</span>
              </div>
            </div>
          </div>
        </div>
        <div style="width: 235px; display: block; float: right;">
          <div style="color: #fff;">
            <div style="height: 32px; line-height: 32px; padding-left: 20px;background-color: #64AADD; ">技术资源</div>
            <div style="margin-top: 10px;">
              <img 
              src="https://advpublish-test.oss-cn-qingdao.aliyuncs.com/ruby/%E9%A6%96%E9%A1%B5-%E6%8A%80%E6%9C%AF%E8%B5%84%E6%BA%90.png" 
              alt="" style="width: 100%;" @click="()=>router.push({path: '/technology'})">
            </div>
          </div>
        </div>
      </div>
      <div style="margin-top: 10px;">
        <div style="width: 495px; display: inline-block;">
          <div style="">
            <div style="height: 32px; line-height: 32px; padding-left: 20px;background-color: #64AADD; color: #fff;">
              <span style="font-size: 1rem;">公司新闻</span>
              <span style="padding-left: 150px; cursor: pointer;font-size: 1rem;" class="bty-more"  @click="() => router.push({ path: '/about' })">更多 >></span>
            </div>
            <div style="height: 120px; line-height: 23px;">
              <div style="margin-top: 10px; color: #333; padding: 0 10px; font-size: 0.8rem;" v-for="(item, index) in news"
                :key="index">
                <span style="float: left; cursor: pointer;"
                  @click="() => router.push({ path: '/news' })">{{ item.title }}</span>
                <span style="float: right;">{{ item.addtime }}</span>
              </div>
            </div>
          </div>
        </div>
        <div style="width: 235px; display: block; float: right;">
          <div style="color: #fff;">
            <div style="height: 32px; line-height: 32px; padding-left: 20px;background-color: #64AADD; ">一站式采购</div>
            <div style="margin-top: 10px;">
              <img 
              src="https://advpublish-test.oss-cn-qingdao.aliyuncs.com/ruby/%E4%B8%80%E7%AB%99%E5%BC%8F%E9%87%87%E8%B4%AD.png" 
              alt="" 
              style="width: 100%;"
              @click="()=>router.push({path: '/shop'})"
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>

import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { lunboList, getTopThree, getNewsProduct } from '@/requests';

const router = useRouter();
const lunBoData = ref();
const topThree = ref();
const news = ref();
const product = ref();

const getLunBoData = async () => {
  const res = await lunboList();
  if (res.status === 2000) {
    lunBoData.value = res.data;
  } else {
    console.log("获取轮播失败");
  }
}
getLunBoData();


const forTopThree = async ()=>{
  const res = await getTopThree();
  if (res.status === 2000){
    topThree.value = res.data;
  }
}
forTopThree();

const forNewsProduct = async ()=>{
  const res = await getNewsProduct();
  if (res.status === 2000){
    news.value = res.data.news;
    product.value = res.data.product;
  }
}

forNewsProduct()

// 轮播图点击跳转
const linkLunBoDetail = (item)=>{
  const cg = item.cg;
  const detail_id = item.detail_id;
  if (cg === 1){
    // 跳转到产品详情
    router.push({path: "/detail", query: {'id': detail_id}})
  }else if (cg === 2){
    // 跳转到技术服务详情
    router.push({path: "/technology", query: {'id': detail_id}})
  }else if (cg === 3){
    // 跳转到公司新闻详情
    router.push({path: "/news", query: {'id': detail_id}})
  }else if (cg === 4){
    // 跳转到促销活动详情
    router.push({path: "/promotion_detail", query: {'id': detail_id}})
  }
}
</script>
<style scoped>
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 380px;
  height: 380px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}


.img-container-item {
  height: 130px;
  width: 235px;
  text-align: left;
  color: #fff;
}

.container {
  position: relative;
  width: 235px;
  /* 设定图片宽度 */
  height: 130px;
  /* 设定图片高度 */
}

.container img {
  /* /* width: 100%; */
  height: 100%;
  object-fit: cover;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  /* 半透明黑色蒙板 */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
  box-sizing: border-box;
  text-align: center;
}

.container:hover .overlay {
  opacity: 1;
}

.container-middle{
  margin-left: 25px;
  margin-right: 25px;
}

.bty-more:hover{
  color: #bf471f;
}
</style>